﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图片列表</title>
    <link href="../../../Framework/bootstrap-3.2.0/css/bootstrap.css" rel="stylesheet" />
    <link href="../../twiImgGrid/twiImageGrid.css" rel="stylesheet" />
    <script src="../../jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../../../Framework/bootstrap-3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../twiImgGrid/jquery.TwiImageGrid.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var imgGrid = new Twi.ImageGrid({
                renderTo: '#imgGrid',
                layoutCls: 'col-sm-4 col-md-3 col-lg-2',
                detail:true
            });
            imgGrid.loadData([{
                FNAME: '图片1',
                FURL: '/twiUI/samplePictures/Chrysanthemum.jpg'
            }, {
                FNAME: '图片2',
                FURL: '/twiUI/samplePictures/Desert.jpg'
            }, {
                FNAME: '图片3',
                FURL: '/twiUI/samplePictures/Hydrangeas.jpg'
            }, {
                FNAME: '图片4',
                FURL: '/twiUI/samplePictures/Jellyfish.jpg'
            }, {
                FNAME: '图片5',
                FURL: '/twiUI/samplePictures/Koala.jpg'
            }, {
                FNAME: '图片6',
                FURL: '/twiUI/samplePictures/Lighthouse.jpg'
            }, {
                FNAME: '图片7',
                FURL: '/twiUI/samplePictures/Penguins.jpg'
            }, {
                FNAME: '图片8',
                FURL: '/twiUI/samplePictures/Tulips.jpg'
            }]);
        });  
    </script>
</head>
<body>
   <div class="container">
       <div id="imgGrid"></div>
   </div>
</body>
</html>
